<template>
  <!-- 挂载到 body 节点下 -->
  <van-popup
    v-model:show="props.noticeShow"
    teleport="body"
    closeable
    @click-close-icon="closeNotice"
    style="top: 300px; border-radius: 20px"
  >
    <div class="notice-box">
      <el-scrollbar height="500px">
        <div class="no-notice" v-if="noticeList.length == 0"></div>
        <div
          class="notice-list"
          v-else
          v-for="item in noticeList"
          :key="item.id"
        >
          <div class="title">{{ item.title }}</div>
          <div class="time">发布时间:{{ item.submit_time }}</div>

          <div class="content">
            {{ item.content }}
          </div>
          <div class="place">影响区域:{{ item.area_name }}</div>
          <div class="tel">物业电话:{{ item.tel }}</div>
        </div>
      </el-scrollbar>
    </div>
  </van-popup>
</template>
<script setup>
import { useGetAllNotice } from "./hooks/useGetAllNotice"
const { noticeList } = useGetAllNotice()
const props = defineProps(["noticeShow"])
const emit = defineEmits(["close-Notice"])
function closeNotice() {
  emit("close-Notice")
}
</script>
<style lang="stylus" scoped>
.van-popup
  width 80%
  .notice-box
    width 300px
    border-radius 20px
    padding 35px 10px 10px 10px
    box-sizing border-box
    color #333
    .notice-list
      border-bottom 1px solid #eee
      padding 5px
      .title
        font-size 16px
        text-align center
        color #333
        font-weight 700
      .content
        text-indent 2em
        margin-top 5px
        color #666
        font-size 15px
      .place
        text-align right
        color #666
        margin-top 10px
        font-style italic
        font-size 12px
      .tel
        color #666
        text-align right
        font-style italic
        font-size 12px
      .time
        text-align center
        color #666
        font-style italic
        font-size 12px
        line-height 1.5

        // background-color red
</style>
